MetaDraw

Quick Tips for Working with Hotspots in MetaDraw

MetaDraw is a powerful tool for creating and responding to Hotspots within an image.
Better yet it's easy.

The technique is simple:
a) Set up the hotspot regions
b) Trap events in MetaDraw to respond to user actions;
        clicks, double clicks, or mouse movement over a hotspot

A hotspot map is basically a set of shaped regions which overlay some image. Each shape can have multiple named attributes such as a name and a database pointer, perhaps a URL associated with the shape. For a map of the USA we might have shape attributes such as state name, capital city, and population.

For simple application you can use the HS Editor utility included with MetaDraw to create hotspot maps which you will then ship with your application.

If you prefer, the shapes can be created in your own application, either by drawing them directly with your code, or by allowing users to draw the hotspots in your application ( using MetaDraw ) similar to the way it is done in HS Editor ( remember HS Editor was itself created using MetaDraw )

Creating a HotSpot Map Using HS Editor Tool

1. Open our Hotspot Editor utility
2. User File / Load menu to open your background image
3. Use the toolbar to choose shapes you may wish to add as hotspots
4. Draw your desired shapes.
5. Pick the select tool ( Arrow ) from toolbar and then select a shape The shape should now have selection / resize handles on it. You can move, or resize the shape, or you can hit Delete key to delete it.
6. To make a shape into a hotspot
   1. Choose the Format / Hotspot Info menu while the shape is selected
   2. Select the checkboxes for the desired HotSpot attributes
      - HotSpot - MetaDraw triggers onHotSpot event when user moves into, within, or out of a hotspot
      - Visible - probably you want false so shape is not seen
      - Web URL - allows MetaDraw to control IE in response to clicks on the hotspots
      - Click - MetaDraw will trigger HitObject Events when user clicks a hotspot
      - DoubleClick - MetaDraw will trigger HitObjectDouble Events when user clicks a hotspot
      - Cursor - makes cursor change while over a hotspot
   3. Specify name for object in the HotSpot info area
   4. If desired specify a URL
   5. Click OK
   6. If desired additional tags can be set using the Format / Object Tags menu
7. Repeat steps 4 through 6 as desired for multiple shapes
8. Test by selecting View Only tool ( first on left ) from toolbar Invisible objects should now be hidden
9. Depending on checkboxes you selected in step (6/2) above
   - The Mouse should change when moving over hotspot
   - The name you specified in objTag / HotSpot Info field should appear as a tooltip
   - A msg box should appear in response to Click or Double Click
   - IE should open to the URL specified in response to double click
10. OK now save the Hotspot map
    Probably you do not want to include the background image so select the Selection tool and click on the background ( not on a hotspot ) and hit Delete key
    - Now select File / Save As menu
    - Specify MetaDraw Picture ( mdp ) as the format
11. If you later want to revise the hotspots
    - Use File / Load to load the Jpg image
    - Use File / Merge to load the hotspot layout
    - Remember to delete the background again before saving the layout

HS EDITOR NOTES
- If you don't mind big files, you can save and load the original background and hotspots together
- To Undo use Shift Backspace
- HS Editor was written using MetaDraw ----

Responding to HotSpots using MetaDraw in your Application

1. Use LoadPicture with 2nd parameter PIC_PICTURE to load initial JPG
2. Use LoadPicture again with 2nd parameter PIC_PICTURECLIP to load the hotspot Map
3. Set EditMode = ED_VIEW, ShowInvisible = False, HotSpots = True
4. Trap the events OnHotSpot, HitObject, HitObjectDouble and read the ObjTag property so you'll know what object was hit or moved over

Creating a HTML ImageMap with MetaDraw

It's easy to create HTML ImageMaps - setting up hotspot areas for any raster image in a web browser

Just create your hotspots as described above and call the CreateImageMap method from MetaDraw - yes, it's that easy.

EXAMPLE - Hotspot Creation Application in your web browser

Click Here to see an example right in your web browser. You'll be able to draw shapes, and create and name hotspots, and then test it out. To see the actual code just right click ( outside of MetaDraw ) and select "View Source"

Believe it or not that's all the code you need - you are done !

sssh! - Remember - don't tell your boss how easy this was.